<template>
	<div class="home">
		<div class="header">
			<router-link class="recommend" :to="{name:'recommend'}">推荐</router-link> 
			<router-link class="rank" :to="{name:'rank'}">排行榜</router-link> 
			<router-link class="search" :to="{name:'search'}">搜索</router-link>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'home',
		components: {
			
		}
	}
</script>

<style lang="scss" scoped>
.home{
	width: 100%;
	.header{
		width: 100%;
		height: 32px;
		position: absolute;
		background-color: skyblue;
		.recommend{
			line-height: 32px;
			float: left;
			width: 33.3%;
			color: #000000;
			font-size: 16px;
			text-align: center;
		}
		.rank{
			line-height: 32px;
			float: left;
			width: 33.3%;
			color: #000000;
			font-size: 16px;
			text-align: center;
		}
		.search{
			line-height: 32px;
			float: left;
			width: 33.3%;
			color: #000000;
			font-size: 16px;
			text-align: center;
		}
	}
}
</style>
